<template>
    <div>
        <!-- 这里要记住不能v-for绑定el-row -->
        <div v-for="( item, index ) in fertilizers" :key="item.landId" class="fertilizer">
            <!-- 第一条信息 -->
            <el-row>
                <!-- 图片部分 -->
                <el-col :span="4">
                    <img :src="item.fertilizerPic" class="fertilizerPic">
                </el-col>
                <!-- 数量部分 -->
                <el-col :span="4">

                    <span class="fertilizerName">{{ item.fertilizerName }}</span>
                    <img v-if="item.quantity > 10" src="../assets/热销.png"
                        style="display: inline-block; height:25px; margin-left:10px">
                    <el-input-number v-model="num" :min="1" :max="100" @change="handleChange" style="margin-top:25px;" />
                </el-col>
                <!-- 文字部分  -->
                <el-col :span="6" class="text1">

                    <h1>生产商:{{ item.productor }}</h1>
                    <h1>价格:{{ item.price }}</h1>
                </el-col>
                <!-- 功能部分 -->
                <el-col :span="8" class="func">
                    <el-button color="#4bc05d" @click="">购 &nbsp 买</el-button>

                    <!-- <img src="@/assets/draw.png">
                    <img src="@/assets/comunicate.png">
                    <img src="@/assets/donate.png"> -->
                </el-col>
            </el-row>

        </div>
        <h1 class="reachBottom">已 到 最 底</h1>
    </div>
</template>

<script >
import { ref } from 'vue'
import axios from "axios"
const show = ref(true)
export default {
    name: '',
    components: {
    },
    data() {
        return {

            showStatusBar: false,
            status: [false, false],
            drawStatus: true,
            num: ref(1),
            fertilizers: [

                {
                    fertilizerId: "",
                    fertilizerName: "茶渣肥",
                    fertilizerPic: require("@/assets/茶渣肥.png"),
                    productor: "小黄一家",
                    price: "3r/一斤",
                    quantity: ""
                },
                {
                    fertilizerId: "",
                    fertilizerName: "大豆肥",
                    fertilizerPic: require("@/assets/大豆肥.png"),
                    productor: "小黄一家",
                    price: "5r/一斤",
                    quantity: ""
                },
                {
                    fertilizerId: "",
                    fertilizerName: "秸秆肥",
                    fertilizerPic: require("@/assets/秸秆肥.png"),
                    productor: "小黄一家",
                    price: "1.5r/一斤",
                    quantity: ""
                },

            ]
        }
    },
    methods: {

        // async getData() {
        //     try {
        //         const response = await axios.get("");
        //         this.lands = response.data;
        //     } catch (error) {
        //         console.log(error);
        //     }
        // }
        //获取数据长度
        // setStatus() {
        //     const length = this.lands.length;
        //     this.status = new array(length).fill(false);
        // },


    },
    //从后端接口获取数据
    created() {
        // this.getData();
        // this.setStatus();

    },
    mounted() {
    },
}
</script>
<style lang="css" scoped>
/* 土地部分 */
.fertilizer {
    border: solid 0.5px rgb(0, 0, 0);
    /* background-color: gold; */
    /* #67b383 */
    border-collapse: collapse;
}

.fertilizerName {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    font-size: 30px;
    margin-top: 10px;

}



.fertilizerPic {
    height: 100px;
    width: 150px;
    margin: 10px;

    /* margin: 20px 0 0 190px; */
}

/* 文字部分 */
h1 {


    margin-block-start: 0;
    margin-block-end: 0;
}

.text1 {
    display: flex;
    justify-content: center;
    flex-direction: column;

}

.text1 h1 {
    margin: 5px 0;
    font-size: 30px;
    font-weight: 500;
}



/* 功能部分 */
/* 这里记得适配优化 */
.func {
    display: flex;
    align-items: center;
    justify-content: center;

}

.func .el-button {
    border-radius: 4px;
    height: 60px;
    width: 150px;
    color: white;
    margin-left: 120px;
    font-size: 24px;
}

/* 到达最底 */
.reachBottom {
    text-align: center;
    font-size: 40px;
    font-weight: 100;
}
</style>
